<template>
	<view class="mask" @touchmove.stop.prevent>
		<view class="content">
			<view class="title">
				<text>评价</text>
				<image @click="close()" src="../../static/icon1/47.png" mode="aspectFill"></image>
			</view>
			<view class="username-view">
				<view class="user-view">
					<image :src="userList[1]" mode="aspectFill"></image>
					<text style="font-size: 28rpx;padding-left: 10rpx;">{{userList[0]}}</text>
				</view>
				<text style="height: 50%;">{{userList[3]==0?'好评自动收藏，差评自动拉黑':'差评后，该雇主任务将不再为您展示'}}</text>
			</view>
			<view class="scroll-view"></view>
			<view class="pingjia-icon-view">
				<!-- 	<view @click="pingjia_item=0">
					<image :class="pingjia_item==0 ? 'slected-chaping' : 'chaping'" mode="aspectFill">
					</image>
					<text>很糟糕</text>
				</view>
				<view @click="pingjia_item=1">
					<image :class="pingjia_item==1 ? 'slected-zhongping' : 'zhongping'" mode="aspectFill">
					</image>
					<text>一般般</text>
				</view>
				<view @click="pingjia_item=2">
					<image :class="pingjia_item==2 ? 'slected-haoping' : 'haoping'" mode="aspectFill">
					</image>
					<text>太赞了</text>
				</view> -->
				<view @click="pingjia_item=2">
					<image :class="pingjia_item==2 ? 'slected-haoping' : 'haoping'" mode="aspectFill">
					</image>
					<text>满意</text>
				</view>
				<view @click="pingjia_item=0">
					<image :class="pingjia_item==0 ? 'slected-chaping' : 'chaping'" mode="aspectFill">
					</image>
					<text>不满意</text>
				</view>
			</view>
			<view class="shuolaingju" v-if="!isShowShuoliangju" @click="isShowShuoliangju_f()">
				<text>说两句 ></text>
			</view>
			<view v-if="isShowShuoliangju" maxlength="50" class="shuojiju">
				<textarea v-model="pjInfo" maxlength="50" @input="input($event)" />
				<text>{{50-count}}</text>
			</view>
			<view class="btns" :style="{'margin-top':isShowShuoliangju?'30rpx':'80rpx'}">
				<view class="btn1" @click="isShow=true"> 直接拉黑 </view>
				<view class="btn2"
					:style="{'background-color':pingjia_item!=-1?'#FCC928':'#ABABAB',color:pingjia_item!=-1?'#402110':'#FFF'}"
					@click="pingjia_item!=-1?fabuPj():''">{{pingjia_item==0?'匿名提交':'提交'}}</view>
			</view>
			<!-- v-if="userType == 1" -->
			<!-- <view class="heimingdan">
				<view class="heimingdan-left" style="color: #999;">不评价直接加入黑名单</view>
				<view class="heimingdan-btn" @click="isShow=true">
					<image src="../../static/icon1/hmd-btn.png" mode="widthFix"></image>
				</view>
			</view> -->
			<u-modal @cancel="isShow=false" @confirm="addHmd" cancelText="暂不拉黑" confirmText="确认拉黑"
				confirmColor="#F39B19" :show="isShow" :title="userType == 1?'将雇员加入黑名单':'将雇主加入黑名单'" showCancelButton>
				<view class="slot-content" v-if="userType == 0">
					<text>1. 雇主被加入黑名单后，将不会看到他在平台发布的任务。</text>
					<text>2. 您可在“我的零工-黑名单”中将雇主移除黑名单。</text>
					<text style="padding-bottom: 0;">3. 若订单遇到问题，您仍可联系客服进行投诉。</text>
				</view>
				<view class="slot-content" v-if="userType == 1">
					<text>1. 雇员被加入黑名单后，将不会看到您在平台发布的任务。</text>
					<text>2. 您可在“我的雇员-黑名单”中将雇员移除黑名单。</text>
					<text style="padding-bottom: 0;">3. 若订单遇到问题，您仍可联系客服进行投诉。</text>
				</view>
			</u-modal>
		</view>
	</view>
</template>
<script>
	import unit from '@/libs/newUnit.js'
	// import fetch from '../../libs/request.js'
	// import api from '../../api/api.js'
	export default {
		name: "pingjia",
		props: {
			userList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				pingjia_item: -1,
				isShowShuoliangju: false,
				count: 0,
				pjInfo: '',
				isShow: false,
				userType: uni.getStorageSync('userType')
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			isShowShuoliangju_f() {
				this.isShowShuoliangju = true
			},
			input(event) {
				this.count = event.detail.cursor
			},
			async addHmd() {
				let touserUId
				if (Object.keys(this.userList[4]).length !== 0) {
					touserUId = this.userList[4].taskUserId
					// console.log(this.userList[4].taskUserId)
				} else {
					touserUId = this.userList[4]
					// console.log(this.userList)
				}
				let res = await this.$fetch(this.$api.order_heimingdan, {
					touserId: touserUId
				}, 'POST')
				if (res.code !== 0) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (res.code == 0) {
					this.isShow = false
					uni.showToast({
						title: '加入黑名单成功',
						icon: 'none'
					})
				}
			},
			async fabuPj() {
				let score = this.pingjia_item == 0 ? '2' : this.pingjia_item == 1 ? '4' : this.pingjia_item == 2 ?
					'5' : '4'
				let text = this.pingjia_item == 0 ? '很糟糕' : this.pingjia_item == 1 ? '一般般' : this.pingjia_item == 2 ?
					'太赞了' : '一般般'
				unit.order_evaluate(this.userList[2], score, text, this.pjInfo, this.userList[3])
				if (this.pingjia_item == 2) {
					let res = await this.$fetch(this.$api.add_collect, {
						relationId: this.userList[4],
						type: 1, //0是雇主，1雇员，2是任务
					}, 'POST', 'JSON')
				}
				setTimeout(() => {
					this.close()
				}, 800)
			}
		},
		mounted() {},
	}
</script>
<style lang="less" scoped>
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 999;
	}

	.content {
		width: 100%;
		// height: 760rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		border-radius: 25rpx 25rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.slot-content {
		line-height: 40rpx;
		color: #666;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text {
			padding-bottom: 20rpx;
		}
	}

	.heimingdan {
		width: 91%;
		height: 80rpx;
		padding-bottom: 20rpx;
		// border: 1px solid;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.heimingdan-btn {
			image {
				width: 184rpx;
				height: 100%;
			}
		}
	}

	.title {
		width: 710rpx;
		height: 40rpx;
		margin: 0 auto;
		margin-top: 38rpx;
		position: relative;

		&>text {
			display: inline-block;
			width: 670rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			line-height: 40rpx;
		}

		&>image {
			position: absolute;
			right: 0;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.username-view {
		margin-top: 50rpx;
		width: 690rpx;
		text-align: center;

		&>text {
			margin-left: 23rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #515151;
		}
	}

	.user-view {
		min-width: 154rpx;
		// height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;

		&>image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		&>text {
			font-size: 28rpx;
			font-weight: bold;
			margin-right: 16rpx;
		}
	}

	.scroll-view {
		width: 690rpx;
		height: 1rpx;
		background-color: #F1F1F5;
		margin: 30rpx 0 68rpx 0;
	}

	.haoping {
		content: url('@/static/icon3/satisfied4.png');
		width: 96rpx;
		height: 96rpx;
	}

	.slected-haoping {
		content: url('@/static/icon3/satisfied5.png');
		width: 96rpx;
		height: 96rpx;
	}

	.zhongping {
		content: url('@/static/icon1/2-2.png');
		width: 68rpx;
		height: 68rpx;
	}

	.slected-zhongping {
		content: url('@/static/icon1/2-1.png');
		width: 68rpx;
		height: 68rpx;
	}

	.chaping {
		content: url('@/static/icon3/satisfied6.png');
		width: 96rpx;
		height: 96rpx;
	}

	.slected-chaping {
		content: url('@/static/icon3/satisfied7.png');
		width: 96rpx;
		height: 96rpx;
	}

	.pingjia-icon-view {
		width: 580rpx;
		height: 130rpx;
		display: flex;
		justify-content: space-around;

		&>view {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			// width: 80rpx;
			height: 130rpx;

			&>image {
				width: 80rpx;
				height: 80rpx;
			}

			&>text {
				font-size: 28rpx;
				font-weight: 400;
				color: #515151;
			}
		}
	}

	.shuolaingju {
		margin-top: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #A5A5A5;
		line-height: 36rpx;
	}

	.btns {
		width: 690rpx;
		height: 88rpx;
		margin-bottom: 30rpx;
		line-height: 88rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;

		.btn1 {
			width: 160rpx;
			border-radius: 12rpx;
			border: 1px solid #7F7F7F;
			color: #7F7F7F;
			font-size: 28rpx;
		}

		.btn2 {
			width: 500rpx;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.shuojiju {
		width: 690rpx;
		height: 165rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin-top: 60rpx;
		display: flex;

		&>textarea {
			height: 135rpx;
			width: 570rpx;
			margin: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #010100;
			line-height: 40rpx;
		}

		&>text {
			height: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ABABAB;
			line-height: 41px;
			position: relative;
			bottom: 0px;
			right: 0rpx;
			margin: 90rpx 0 0;
		}
	}
</style>